<template>
  <div id="Stu">
    <div class="mt-4">
      <el-input
        v-model="conditions"
        placeholder="请输入查询值"
        class="input-with-select"
        style="float: left;width: 300px"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="请选择查询条件" style="width: 115px">
            <el-option label="姓名" value="sname" />
            <el-option label="性别" value="sax" />
            <el-option label="班级" value="classId" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" @click="selectStu(select, conditions)"/>
        </template>
      </el-input>
    </div>
    <el-table :data="stuAllData" table-layout="auto" style="width: 100%" >
      <el-table-column fixed prop="sname" label="姓名" />
      <el-table-column prop="sax" label="性别" width="120" />
      <el-table-column prop="sphone" label="手机号" />
      <el-table-column prop="cla" label="班级" />
      <el-table-column prop="claG" label="班导" />
      <el-table-column prop="remark" label="备注信息" />
      <el-table-column label="操作" fixed="right" header-align="center" width="210">
        <template #default="scope">
          <el-button plain @click="clickToModify(scope.row)" type="primary" :icon="Edit">修改</el-button>
          <el-divider direction="vertical" />
          <el-button type="danger" @click="clickToDelete(scope.row)" plain :icon="Delete">删除 </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination 
      background
      :page-sizes="[10]"
      layout="prev, pager, next"
      :total="total" 
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>

import { Search,Delete,Edit } from '@element-plus/icons-vue'
import { ElNotification } from 'element-plus'
import { ref } from "vue";
import axios from "axios";

export default {
  name: "StuAll",

  setup() {
    let select = ref('');
    let conditions = ref('');
    const stuAllData = ref([])
    let total = ref(11)

    getStuAll()

    function getStuAll() {
      axios.get("/stuAll").then((res) => {
        stuAllData.value = res.data.data
        total.value = res.data.data.length
      })
    }

    function selectStu(s, c) {
      console.log(s, c)
      if (s === "sax") {
        if (c !== "男" && c !== "女") {
          ElNotification({
            title: '错误',
            message: '查询性别值只能为 男 or 女',
            type: 'error',
            offset: 50,
          })
        }
      } else {
        if (c.length > 5) {
          ElNotification({
            title: '错误',
            message: '查询值请正确输入!',
            type: 'error',
            offset: 50,
          })
        } else {
          console.log("查询！")
        }
      }
    }

    const clickToModify = (row) => {
      console.log(row)
    }

    const clickToDelete = (row) => {
      console.log(row)
    }

    const handleCurrentChange = (val) => {
      console.log(`当前页面: ${val}`)
    }

    return {
      stuAllData,
      conditions,
      Search,
      Delete,
      Edit,
      selectStu,
      total,
      select,
      clickToModify,
      clickToDelete,
      handleCurrentChange
    }
  }
}
</script>

<style scoped>
#Stu {
  margin: 50px auto;
  width: 50%;
  min-width: 1000px;
}
.el-pagination {
  float: right;
  margin: 50px auto;
}
.el-select .el-input {
  width: 130px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>